import React from 'react';
import { observer, inject } from 'mobx-react';
import { getLabel } from '../../util/common';
import { Icon } from 'weaver-mobile';
import * as mobx from 'mobx';
import '../../style/locationField.less';



@inject('wfGlobalStore','wfLayoutStore','wfLocationMap')
@observer
export default class LocationElement extends React.Component{

    constructor(props) {
        super(props);
    }

    componentDidMount(){
        const { wfLocationMap,viewAttr,wfGlobalStore,fieldid } = this.props;
        const { getLocaiton, setHasLocationField, setLocationInfo, addEditFieldIds, deleteEditFieldIds } = wfLocationMap;
        const { commonParam } = wfGlobalStore;
        if(viewAttr != 1) {
            if(commonParam.position && commonParam.address) {//提交需确认，取上次定位显示
                const index = commonParam.position.indexOf(",");
                const latitude = commonParam.position.substring(0, index);
                const longitude = commonParam.position.substring(index+1);
                const position = [latitude, longitude];
                setLocationInfo({ loaded: true, position: position, address: commonParam.address });
            }
            addEditFieldIds(fieldid);
            getLocaiton();
        }
    }

    componentWillReceiveProps(nextProps, nextState) {
        const { viewAttr,wfGlobalStore,fieldid } = nextProps;
        const { wfLocationMap } = this.props;
        const { deleteEditFieldIds, addEditFieldIds, getLocaiton } = wfLocationMap;
        deleteEditFieldIds(fieldid);
        if(viewAttr != 1) {
            getLocaiton();
            addEditFieldIds(fieldid);
        }
    }
    
    openLocationMap() {
        const { wfLocationMap,fieldObj } = this.props;
        const { setFieldObj } = wfLocationMap;
        setFieldObj(fieldObj);
        window.historyRoute.push({
            pathname: "/req/locationMap",
            params: {},
        });
    }

    render() {
        const { viewAttr,wfLocationMap,fieldObj } = this.props;
        const { locationInfo } = wfLocationMap;

        let viewAttrAddress = getLabel(126181, '暂无位置信息');

        let specialobj  = fieldObj.specialobj ? mobx.toJS(fieldObj.specialobj) : [];
        specialobj && specialobj.map((obj, index) => {
            obj.locationList.map(location => {
                viewAttrAddress = location.address;
              })
        })

        return (
            <div className='wf-location-field'>
                <div className='location'>
                    <Icon className={viewAttr == 1 ? 'locationIcon-readonly' : 'locationIcon'} type={'location'} />
                </div>
                <div className='address'>
                    <div>
                        {viewAttr == 1 ? viewAttrAddress : locationInfo.loaded ? locationInfo.address : getLabel(126183, '正在获取') + "..."}
                        {!locationInfo.loaded && viewAttr != 1 && <Icon className='loadingIcon' type={'loading'} />}
                    </div>
                    <div className='track' onClick={() => {this.openLocationMap()}}>{getLabel(502341, '位置轨迹')}</div>
                </div>
            </div>
        )
        
    }
}